<script setup lang="ts">
import { postBaremetalNodeOperationApi } from '@/apis/modules/node'
import { ModalHelper } from '@/utils/modal.helper'

interface IProps {
  status: E_NODE_STATUS
  id: string
}

const props = defineProps<IProps>()
const emit = defineEmits(['refresh'])
const map = {
  [E_NODE_STATUS.AVAILABLE]: {
    text: getOptionLabel(E_NODE_STATUS.AVAILABLE, nodeStatusOptions),
    color: '#00B42A',
  },
  [E_NODE_STATUS.NOT_AVAILABLE]: {
    text: getOptionLabel(E_NODE_STATUS.NOT_AVAILABLE, nodeStatusOptions),
    color: '#F53F3F',
  },
  [E_NODE_STATUS.SELF_CHECKING]: {
    text: getOptionLabel(E_NODE_STATUS.SELF_CHECKING, nodeStatusOptions),
    color: '#393C40',
  },
  [E_NODE_STATUS.WAITING_CLEAN]: {
    text: getOptionLabel(E_NODE_STATUS.WAITING_CLEAN, nodeStatusOptions),
    color: '#FF7D00',
  },
  [E_NODE_STATUS.CLEANING]: {
    text: getOptionLabel(E_NODE_STATUS.CLEANING, nodeStatusOptions),
    color: '##165DFF',
  },
  [E_NODE_STATUS.CLEAN_FAILED]: {
    text: getOptionLabel(E_NODE_STATUS.CLEAN_FAILED, nodeStatusOptions),
    color: '##165DFF',
  },
  [E_NODE_STATUS.SELF_CHECK_FAILED]: {
    text: getOptionLabel(E_NODE_STATUS.SELF_CHECK_FAILED, nodeStatusOptions),
    color: '##165DFF',
  },
}
const needRefresh = [
  E_NODE_STATUS.CLEAN_FAILED,
  E_NODE_STATUS.SELF_CHECK_FAILED,
]
const current = computed(() => {
  return map[props.status] || { text: '-', color: '#393C40' }
})
function handleRefresh() {
  const title = props.status === 6 ? '重试清理' : '重试自检'
  const content = `确定要${title}吗？`
  ModalHelper.confirm(
    {
      title,
      content,
      width: 480,
      closable: false,
      okText: '确定',
    },
    async () => {
      return postBaremetalNodeOperationApi({
        id: props.id,
        failed_status: props.status,
      }).then(() => {
        emit('refresh')
      })
    },
  )
}
</script>

<template>
  <div class="node-status flex items-center gap-x-2 text-1 text-xs">
    {{ current.text }}
    <i-icons-refresh
      v-if="needRefresh.includes(props.status)"
      class="cursor-pointer text-success"
      @click="handleRefresh"
    />
  </div>
</template>

<style scoped lang="less"></style>
